<template>
	<view class="LNlxr">
		<view class="CusTop">
			<Top :fa-msg="msg"></Top>
			<view class="CusShai">
				<p :class="act==1?'active':'pppLN'" @click="gai()">排序</p>
				<p :class="act==2?'active':'sssLN'" @click="gaier()">筛选</p>
			</view>
		</view>
		<view class="LNCon">
			<ul class="ULCon" v-show="zhu">
				<li class="LICon" v-for="item in (newArr?newArr:arr)" :key="item.id">
					<view class="LNcardTop">
						<view class="LNleft">
							<p class="userName">{{item.userName}}&nbsp;&nbsp;{{item.sex==="女"?"女士":"男士"}}</p>
							<p class="zhiwu">职务：部门经理</p>
							<p class="phone">手机：{{item.tel}}</p>
						</view>
						<view class="LNRight">
							<view class="rightON">
								<p class="lxrgs">{{item.gongsi}}</p>
								<p class="lxrjs">角色：决策人</p>
								<p class="lxrsr">生日：{{item.bir}}</p>
							</view>
						</view>
					</view>
					<view class="lxrkong"></view>
					<view class="lxrcardBtm">
						<p>☎电话</p>
						<p>✍️短信</p>
						<p>✉️邮件</p>
						<p>更多＞</p>
					</view>
				</li>
			</ul>
			<view class="paiPage" v-show="pai">
				<p class="pai">排序方式</p>
				<ul class="uPai">
					<li :class="xvs===true?'ac':'liPai'" @click="yesxv()">正序排序</li>
					<li :class="xvs===false?'ac':'liPai'" @click="noxv()">倒序排序</li>
				</ul>
				<p class="pai">排序属性</p>
				<ul class="uPai">
					<li :class="index===paiINdex?'ac':'liPai'" v-for="(item,index) in ke" :key="item" @click="result(index)">{{item}}</li>
				</ul>
				<view class="LNbottom">
					<view class="chong">重置</view>
					<view class="que" @click="queding()">确定</view>
				</view>
				<p class="pais"></p>
			</view>
			<view class="shaiPage" v-show="shai">
				<p class="keFen">联系人分类</p>
				<ul class="onFen">
					<li v-for="(item,index) in lxrfl" :key="item.id" :class="index===fenIndex?'onActive':'onLI'" @click="flGai(index,item.name)">{{item.name}}</li>
				</ul>
				<p class="keFen">联系人角色</p>
				<ul class="onFen">
					<li v-for="(item,index) in lxrjs" :key="item.id" :class="index===leiIndex?'onActive':'onLI'" @click="jsGai(index,item.name)">{{item.name}}</li>
				</ul>
				<p class="keFen">联系人尊称</p>
				<ul class="onFen">
					<li v-for="(item,index) in lxrzc" :key="item.id" :class="index===typeIndex?'onActive':'onLI'" @click="zcGai(index,item.name)">{{item.name}}</li>
				</ul>
			
		
				<view class="LNbottom">
					<view class="chong">重置</view>
					<view class="que" @click="suo()">确定</view>
				</view>
				<p class="pais"></p>
			</view>
		</view>
	</view>
</template>

<script>
	import Top from "../components/Top/Top.vue"
	export default { 
		data() {
			return {
				msg:"联系人管理",
				act:0,
				arr:[],
				pai:false,
				ke:["联系人姓名","系统编号","手机号码","生日","角色","部门职务","固定电话","电子邮件","所在地区","联系地址","跟进次数",
				"未跟进天数","最后跟进时间","下次跟进时间","下次跟进内容","备注信息","创建人员","创建时间","更新时间"
				],
				par:false,
				paiINdex:0,
				xvs:true,
				zhu:true,
				shai:false,
				lxrfl:[
					{
						id:0,
						name:"全部联系人",
						on:"people",
						ns:"全部联系人"
					},
					{
						id:1,
						name:"我的联系人",
						on:"people",
						ns:"我的联系人"
					},
					{
						id:2,
						name:"下属联系人",
						on:"people",
						ns:"下属联系人"
					},
					{
						id:3,
						name:"我协作的",
						on:"people",
						ns:"我协作的"
					},
					{
						id:4,
						name:"下属协作的",
						on:"people",
						ns:"下属协作的"
					}
				],
				fenIndex:0,
				lxrjs:[
					{
						id:0,
						name:"普通人",
						in:"juer"
					},
					{
						id:1,
						name:"决策人",
						in:"juer"
					},
					{
						id:2,
						name:"分项决策人",
						in:"juer"
					},
					{
						id:3,
						name:"商务决策",
						in:"juer"
					},
					{
						id:4,
						name:"财务决策",
						in:"juer"
					},
					{
						id:5,
						name:"使用人",
						in:"juer"
					},
					{
						id:6,
						name:"意见影响人",
						in:"juer"
					}
				],
				leiIndex:null,
				lxrzc:[
					{
						id:0,
						name:"先生",
						in:"Known"
					},		
					{
						id:1,
						name:"女士",
						in:"Known"
					}
				],
				typeIndex:null,
				lxrsr:[
					{
						id:0,
						name:"今天",
						in:"jt"
					},
					{
						id:1,
						name:"明天",
						in:"mt"
					},
					{
						id:2,
						name:"本周",
						in:"bz"
					},
					{
						id:3,
						name:"下周",
						in:"xz"
					},
					{
						id:4,
						name:"本月",
						in:"by"
					},
					{
						id:5,
						name:"下月",
						in:"xy"
					},
				],

				value: '',
				fenlei:"",
				juese:"",
				zuncheng:"",
				shengri:"",
				newArrs:[]
			}
		},
		methods: {
			flGai(index,name){
				this.fenIndex=index
				this.fenlei=name
			},
			jsGai(index,name){
				this.leiIndex=index
				this.juese=name
			},
			zcGai(index,name){
				this.typeIndex=index
				this.zuncheng=name
			},
			srGai(index,name){
				this.starIndex=index
				this.shengri=name
			},
			yesxv(){
				this.xvs=true
			},
			noxv(){
				this.xvs=false
			},
			ppp(index){
				this.paiINdex=index
			},
			gai(){
				this.act=1,
				this.pai=!this.pai,
				this.shai=false
				this.zhu=false
				if(this.pai==false){
					this.zhu=true
				}
			},
			gaier(){
				this.act=2,
				this.shai=!this.shai,
				this.pai=false,
				this.zhu=false
				if(this.shai===false){
					this.zhu=true
				}
			},
			go(item){
				uni.navigateTo({
				  url:
				    "/pages/crmDetail/crmDetail?item=" +
				    JSON.stringify(item),
				});
			},
			sortByPro(pro, flag) {
			  return (a, b) => {
				if(typeof a[pro] === 'string' && typeof b[pro]==='string'){
					return flag ? a[pro].localeCompare(b[pro]) : b[pro].localeCompare(a[pro])
				}else{
					return flag ? (a[pro] - b[pro]) : (b[pro] - a[pro])
				}
			  }
			},
			result(index){
				this.paiINdex=index
				if(this.paiINdex===0){
					this.arr=this.arr.slice().sort(this.sortByPro('userName',this.xvs))
				}else if(this.paiINdex===1){
					this.arr=this.arr.slice().sort(this.sortByPro('id',this.xvs))
				}else if(this.paiINdex===2){
					this.arr=this.arr.slice().sort(this.sortByPro('tel',this.xvs))
				}else if(this.paiINdex===3){
					this.arr=this.arr.slice().sort(this.sortByPro('bir',this.xvs))
				}else if(this.paiINdex===5){
					this.arr=this.arr.slice().sort(this.sortByPro('bu',this.xvs))
				}else if(this.paiINdex===6){
					this.arr=this.arr.slice().sort(this.sortByPro('bu',this.xvs))
				}else if(this.paiINdex===7){
					this.arr=this.arr.slice().sort(this.sortByPro('zuo',this.xvs))
				}else if(this.paiINdex===8){
					this.arr=this.arr.slice().sort(this.sortByPro('emi',this.xvs)) 
				}else if(this.paiINdex===9){
					this.arr=this.arr.slice().sort(this.sortByPro('school',this.xvs))
				}else if(this.paiINdex===10){
					this.arr=this.arr.slice().sort(this.sortByPro('gongsi',this.xvs))
				}
			},
			queding(){
				this.pai=false,
				this.zhu=true
			},
			suo(){
				this.shai=false,
				this.zhu=true
				if(this.fenIndex===0){
					this.newArr=this.arr.filter(item=>item.shopAll=="全部商机")
					if(this.leiIndex){
						this.newArr=this.arr.filter(item=>item.juer==this.juese && item.shopAll=="全部商机")
						if(this.typeIndex){
							this.newArr=this.arr.filter(item=>item.juer==this.juese  && item.shopAll=="全部商机" && item.Known==this.zuncheng)
						
						}
				
					
					}
					if(this.typeIndex){
						this.newArr=this.arr.filter(item=>item.shopAll=="全部商机" && item.Known==this.zuncheng)
						if(this.starIndex){
							this.newArr=this.arr.filter(item=>item.shopAll=="全部商机" && item.Known==this.zuncheng && item.chengjiao==this.shengri)
						}
						
					}
			
				
				}else if(this.fenIndex!==0 ){
					this.newArr=this.arr.filter(item=>item.people==this.fenlei)
					if(this.leiIndex){
						this.newArr=this.arr.filter(item=>item.juer==this.juese  && item.people==this.fenlei)
						if(this.typeIndex){
							this.newArr=this.arr.filter(item=>item.juer==this.juese  && item.people==this.fenlei && item.Known==this.zuncheng)
						
						}
					
						
					}
					if(this.typeIndex){
						this.newArr=this.arr.filter(item=>item.people==this.fenlei && item.Known==this.zuncheng)
						if(this.starIndex){
							this.newArr=this.arr.filter(item=>item.people==this.fenlei && item.Known==this.zuncheng && item.chengjiao==this.shengri)
						}
						
					}
					
				}
			},
		},
		components:{
			Top
		},
		created() {
		  uni.request({
		    url: "http://127.0.0.1:3000/kehu/getAll", //接口地址
		    method: "POST",
		    success: (res) => {
		      this.arr = res.data.data;
			  console.log(this.arr,"arr")
		    },
		  });  

		},
	}
</script>

<style lang="scss">
.LNlxr{
	background-color: #f9f9f9;
	.CusTop{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		.CusShai{
			display: flex;
			border-bottom: 1px solid #eee;
			background-color: white;
			.pppLN{
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
			.sssLN{
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
			.active{
				color: #0d7bfe;
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
	.LNCon{
		margin-top: 250rpx;
		
		.ULCon{
			padding: 40rpx 20rpx;
			.LICon{
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: white;
				border-radius: 20rpx;
				box-shadow: 1px 1px 5px #ccc;
				margin-bottom: 30rpx;
				color: gray;
				.LNcardTop{
					display: flex;
					justify-content: space-between;
					.LNleft{
						.userName{
							font-size: 28rpx;
							font-weight: 700;
						}	
						.zhiwu{
							margin-top: 20rpx;
							font-size: 25rpx;
						}
						.phone{
							margin-top: 10rpx;
							font-size: 25rpx;
						}
					}
					.LNRight{
						display: flex;
						.rightON{
							.lxrgs{
								font-size: 28rpx;
							}
							.lxrjs{
								margin-top: 20rpx;
								font-size: 25rpx;
							}
							.lxrsr{
								margin-top: 10rpx;
								font-size: 25rpx;
							}
						}
						.tou{
							width: 50rpx;
							height: 50rpx;
						}
						
					}
				}
				
			}
			.lxrkong{
				width: 100%;
				height: 4rpx;
				background-color: #F6F6F6;
				margin: 10rpx 0rpx;
			}
			.lxrcardBtm{
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}
		.paiPage{
			background-color: white;
			padding: 40rpx;
			box-sizing: border-box;
			color: gray;
			width: 100%;
			border-top: 1px solid #ccc;
			overflow-y: auto;
			.pai{
				font-weight: 700;
				margin-bottom: 20rpx;
			}
			.uPai{
				margin-bottom: 20rpx;
				.liPai{
					border: 1px solid #eee;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
					color: black;
				}
				.ac{
					border: 1px solid #eee;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
					color: #0d7bfe;
					
				}
			}
			.LNbottom{
				width: 100%;
				display: flex;
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 0 40rpx;
				.chong{
					width: 50%;
					background-color: white;
					color: #0d7bfe;
					border: 2rpx solid #ccc;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}
				.que{
					width: 50%;
					height: 100rpx;
					text-align: center;
					background-color: #0d7bfe;
					color: white;
					line-height: 100rpx;
				}
			}
			.pais{
				height: 50rpx;
				width: 100%;
			}
		}
		.shaiPage{
			background-color: white;
			padding: 40rpx;
			box-sizing: border-box;
			color: gray;
			width: 100%;
			border-top: 1px solid #ccc;
			overflow-y: auto;
			.keFen{
				height: 60rpx;
				display: flex;
				align-items: center;
				font-weight: 700;
				box-sizing: border-box;
				color: gray;
				padding-left: 10rpx;
			}
			.onFen{
				display: flex;
				flex-wrap: wrap;
			
				margin-top: 20rpx;
				.onLI{
					width: 30%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #eee;
					margin-bottom: 30rpx;
					font-size: 25rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
				}
				.onActive{
					width: 30%;
					height: 80rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #60c6f5;
					margin-bottom: 30rpx;
					font-size: 25rpx;
					background-color: #f8fbff;
					color: #60c6f5;
					
				}
				
			}
			.LNbottom{
				width: 100%;
				display: flex;
				position: fixed;
				bottom: 0;
				left: 0;
				padding: 0 40rpx;
				.chong{
					width: 50%;
					background-color: white;
					color: #0d7bfe;
					border: 2rpx solid #ccc;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}
				.que{
					width: 50%;
					height: 100rpx;
					text-align: center;
					background-color: #0d7bfe;
					color: white;
					line-height: 100rpx;
				}
			}
			.pais{
				height: 50rpx;
				width: 100%;
			}
		}
	}
}
</style>
